import React, { useState, useEffect } from 'react';
import { Card, Space, Button, Divider } from 'antd';
import { COLOR_THEME } from '@/config/theme';
import './index.scss';
/*
 * @Author: Eli.Chen
 * @Date: 2025-03-06 16:40:14
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-03-07 12:04:14
 * @Description: 地方文化专区
 */

const LocZone = () => {
    const [cards] = useState(
        Array.from({ length: 8 }, (_, i) => ({
            id: i,
            title: `文化卡片 ${i + 1}`,
            content: `这里展示第 ${i + 1} 个地方文化特色内容`,
        }))
    );

    // 查看详情处理函数
    const handleViewDetail = (id) => {
        console.log('查看卡片:', id);
        // 这里添加实际业务逻辑
    };
    return (
        <div
            className="locZone-container"
            style={{
                backgroundColor: `${COLOR_THEME.BG_SECONDARY}`,
            }}
        >
            <Card className="locZone-card">
                <div
                    style={{
                        display: 'grid',
                        gridTemplateRows: 'auto auto', // 两行布局
                        gridAutoFlow: 'column', // 按列填充
                        gridGap: '16px 24px', // 行间距16px，列间距24px
                        padding: 24,
                        alignItems: 'start', // 元素顶部对齐
                    }}
                >
                    {cards.map((card, index) => (
                        <Card
                            key={card.id}
                            title={card.title}
                            style={{
                                width: 300,
                                // 奇偶项分配不同行
                                gridRow: index % 2 ? 2 : 1,
                            }}
                            extra={
                                <Button type="link" onClick={() => handleViewDetail(card.id)}>
                                    查看详情
                                </Button>
                            }
                        >
                            {card.content}
                        </Card>
                    ))}
                </div>
            </Card>
        </div>
    );
};
export default LocZone;
